@layout("/common/_container.html"){
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-form form-board" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin">
            <input type="hidden" id="eleFenceId" name="eleFenceId" value="${item.eleFenceId}">

            <div class="layui-form-item">
                <div class="layui-block">
                    <label class="layui-form-label">围栏名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="fenceName" id="fenceName" value="${item.fenceName}"
                               lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-block">
                    <label class="layui-form-label">围栏描述</label>
                    <div class="layui-input-block">
                        <textarea name="fenceDesc" id="fenceDesc" autocomplete="off"
                                  class="layui-textarea">${item.fenceDesc}</textarea>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-block">
                    <label class="layui-form-label">从地图选取</label>
                    <div class="layui-input-block">
                        <div id="mapDiv" style="width:805px; height:340px"></div>
                    </div>
                </div>
            </div>


            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="eleFence-submit" id="eleFence-submit" value="确认">
            </div>
            <button class="layui-hide" id="points-submit"></button>
            <div class="layui-form-item layui-hide" id="points">

            </div>
        </div>
    </div>
</div>

<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=1ba730719590185255eb3bf61dfd70a6"
        type="text/javascript"></script>
<script>
  layui.config({
	 base: Feng.ctxPath + '/static/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form','laydate'], function(){
    var $ = layui.$
    ,form = layui.form
    ,laydate = layui.laydate;

      var map, zoom = 12, polygon, handler;
      //初始化地图对象
      map = new T.Map("mapDiv");
      //设置显示地图的中心点和级别
      map.centerAndZoom(new T.LngLat(116.40969, 39.94940), zoom);
      //允许鼠标双击放大地图
      map.enableScrollWheelZoom();

      var points = [];
      $.each(eval('${details}'),function (index, value) {
          points.push(new T.LngLat(value.lng, value.lat));
      });
      //alert(JSON.stringify(points))
      //创建面对象
      polygon = new T.Polygon(points, {
          color: "blue",
          weight: 3,
          opacity: 0.5,
          fillColor: "#FFFFFF",
          fillOpacity: 0.5
      });
      //向地图上添加面
      map.addOverLay(polygon);
      //编辑面
      polygon.enableEdit();

    $("#points-submit").click(function (obj) {
        var eleFenceId = $("#eleFenceId").val();
        var arr = [];
        arr = polygon.getLngLats();
        var html = '<input type="hidden" name="point" value="1">';
        var point = '';
        for (i in arr[0]) {
            point = arr[0][i];
            html += '<input type="hidden" name="details['+ i +'].lng" value="'+ point.lng +'">' +
                '<input type="hidden" name="details['+ i +'].lat" value="'+ point.lat +'">' +
                '<input type="hidden" name="details['+ i +'].pointNo" value="P'+i+'">' +
                '<input type="hidden" name="details['+ i +'].eleFenceId" value="' + eleFenceId + '">'
            ;
        }
        $("#points").html(html);
    })

  })
  </script>
@}

